<template lang="pug">
  el-dialog(
    :title="type === 2 ? `${info.orgName}: ${info.time}` : '刷卡记录'"
    :visible="visible"
    width="920px"
    v-loading="loading"
    center
    @close="closeHandle"
    destroy-on-close
  )
    el-row(:gutter="32" v-if="type !== 2")
      el-col(:span="15")
        m-form(
          ref="form"
          :items="[...addItems]"
          size="medium"
        )
        el-alert.mb16(
          :title="`疑似刷卡${info.cardAmount || 0 }张，共${info.amount || 0 }次`"
          type="error"
          :closable="false"
        )
      el-col(:span="7")
        a-image(
          :url="info.photo"
          height="216px"
        )
    el-alert.mb16(
      :title="`疑似无人刷卡${info.cardAmount || 0 }张，共${info.amount || 0 }次`"
      type="error"
      :closable="false"
      v-if="type === 2"
    )
    s-table(
      :column="column"
      :tableProps="{'row-key': 'id'}"
      :tableData="tableData"
      :filterProps="{items: filterItems}"
      :pagination="tablePagination"
      :loading="table_loading"
      :pageLimit="5"
      @getList="getList"
      )
      a-image(
        slot-scope="scope"
        slot="photo"
        :url="scope.photo"
        width="64px"
      )
      a-image(
        slot-scope="scope"
        slot="modelAddress"
        :url="scope.modelAddress"
        width="64px"
      )
      a-image(
        slot-scope="scope"
        slot="backgroundPhoto"
        :url="scope.backgroundPhoto"
        width="64px"
      )
      template(slot-scope="scope" slot="video")
        a.c_primary(v-if="scope.video" href="javascript:" @click="showInfo(scope)") 
          i(class="el-icon-video-camera-solid mr5" style="font-size: 27px")
      template(slot-scope="scope" slot="status")
        el-select(v-model="scope.status" size="small" placeholder="请选择" @change="val => statusChange(val, scope.warnDetailId)")
          el-option(
            v-for="item in status2Options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          )
    span(slot="footer" class="dialog-footer tr")
      el-button(@click="closeHandle" size="small") 取 消
    video-modal(:info="infoObj" v-model="infoVisible")
</template>
<script>
import { MForm, STable, AImage} from '@/components'
import { ilCardInfoList, ilCardInfoOrgs } from '@/api/libary'
import {warnFlagUpdate, noCardFlagUpdate} from '@/api/scene'
import { treeReplaceKeys } from '@/utils/util'
import dayjs from 'dayjs'
import VideoModal from './VideoModal'

const column = [
  {
    prop: 'name',
    label: '卡主',
    width: '100'
  },
  {
    prop: 'idcard',
    label: '身份证'
  },
  {
    prop: 'settlingTime',
    label: '刷卡时间',
    rest: {
      sortable: 'custom'
    }
  },
  {
    prop: 'orgName',
    label: '刷卡地点',
  },
  {
    prop: 'modelAddress',
    label: '卡主模板照'
  },
  {
    prop: 'photo',
    label: '疑似刷卡人'
  },
  {
    prop: 'backgroundPhoto',
    label: '全景照片'
  },
  {
    prop: 'video',
    label: '播放视频',
    rest: {
      align: 'center'
    }
  }
]


const column2 = [
  {
    prop: 'name',
    label: '持卡人',
    width: '100'
  },
  {
    prop: 'idcard',
    label: '身份证'
  },
  {
    prop: 'settlingTime',
    label: '刷卡时间',
    rest: {
      sortable: 'custom'
    }
  },
  {
    prop: 'modelAddress',
    label: '卡主模板照'
  },
  {
    prop: 'status',
    label: '标记状态'
  },
  {
    prop: 'video',
    label: '播放视频',
    rest: {
      align: 'center'
    }
  }
]

export default {
  name: 'UnlawCard',
  components: {
    MForm,
    STable,
    VideoModal,
    AImage
  },
  mixins: [dictMixin],
  props: {
    info: {
      type: Object,
      default:() => {}
    },
    // 弹窗打开方式
    type: {
      type: Number,
      default:0 // 0：套刷人员，1：一人多卡, 2:无人刷卡
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'visible',
    event: 'visibleToggle'
  },
  data () {
    return {
      loading: false,
      tablePagination: {
        pageNo: 1
      },
      tableParams: null,
      tableData: [],
      table_loading: false,
      orgs: [],
      infoObj: {},
      infoVisible: false,
      status2Options: [{value: '1', label: '无人刷卡'},{value: '2', label: '正常刷卡'}]
    }
  },
  computed: {
    column () {
      return this.type === 2 ? column2 : column
    },
    id () {
      if (this.type === 2) {
        return this.info.orgId || ''
      }
      return this.info.objId || ''
    },
    addItems () {
      const items = [
        {
          key: 'name',
          label: '疑似刷卡人',
          type: 'text',
          disabled: true,
          initialValue: this.info.objName || ''
        },
        {
          key: 'idcard',
          label: '身份证号码',
          type: 'text',
          disabled: true,
          initialValue: this.info.objCode || ''
        },
        {
          key: 'sex',
          label: '时间段',
          type: 'text',
          disabled: true,
          initialValue: (this.info.startDate || '2019-01-01') +  '~' + (this.info.endDate || dayjs().format('YYYY-MM-DD')),
        }
      ]
      if (this.type === 1) {
        items.unshift({
          key: 'status',
          label: '标记状态',
          type: 'select',
          options: this.dict.flagState || [],
          initialValue: this.info.status && this.info.status.toString() || '',
          change: val => this.flagChange(val)
        })
      }
      return [...items]
    },
    filterItems () {
      if (this.type === 2) {
        return [
          {
            key: 'keyword',
            label: '关键字',
            placeholder: this.type === 2 ? '姓名/社保卡号' : '姓名/身份证',
            width: '240px'
          },
          {
            key: 'status',
            label: '标记状态',
            type:'select',
            options: [{value: '1', label: '无人刷卡'},{value: '2', label: '正常刷卡'}]
          }
        ]
      } 
      return [
        {
          key: 'keyword',
          label: '关键字',
          placeholder: this.type === 2 ?  '姓名/社保卡号' : '姓名/身份证号'
        },
        {
          key: 'orgId',
          label: '刷卡地点',
          type:'select',
          options: this.orgs || []
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if(val){
        this.init()
        if (!this.dict.flagState){
          this.getDict('flagState')
        }
      }
    }
  },
  methods: {
    init(){
      ilCardInfoOrgs(this.id).then(res => {
        const list = res.data || []
        this.orgs = treeReplaceKeys(list,{busiType: 'value', busiName:'label'})
      })
      this.getList()
    },
    getList (params=this.tableParams || {pageNo: 1}) {
      const { info: {startDate, endDate}, id, type} = this
      const that = this
      this.table_loading = true
      const data = {
        startDate: startDate || '2019-01-01 00:00:00',
        endDate: endDate ||  dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }
      if (type === 2) {
        data.orgId = id
      } else {
        data.warnId = id
      }
      ilCardInfoList(data, {...params,  pageSize: 5}, type).then(res => {
        that.tableParams= {
          ...params,
          pageNo: params.pageNo
        }
        const list = res.data && res.data.list || []
        if (type === 2) {
          list.forEach(item => {
            item.status = item.status ? item.status.toString() : ''
          })
        }
        that.tableData = list
        that.tablePagination = {
          ...that.tablePagination,
          total: res.data && res.data.total || 0,
          'current-page': res.data && res.data.pageNum || 1
        }
      }).finally(() => {
        that.table_loading = false
      })
    },
    closeHandle () {
      this.tableParams = null
      this.$emit('visibleToggle')
    },
    showInfo (obj) {
      this.infoObj=obj
      this.infoVisible=true
    },
    // 人员标记更改
    flagChange (val){
      /**
       * @description: objType: 一人多卡: 1, 无人刷卡: 2
       * @param : 
       * @return: 
       */
      warnFlagUpdate({objType: 1,status: val, objId: this.info.objId, objName: this.info.objName,amount: this.info.amount, objCode: this.info.objCode, cardAmount: this.info.cardAmount}).then(() => {
        this.$message.success('修改状态成功')
        this.$emit('getList')
      })
    },
    // 无人刷卡列表标记更改
    statusChange (status, warnDetailId){
      noCardFlagUpdate({status, warnDetailId}).then(() => {
        this.$message.success('修改状态成功')
        this.$emit('getList')
      })
    }
  }
}
</script>
